<template>
    <div class="app">
        <!-- 这里是nav -->
        <my-nav></my-nav>
        <!-- 这里是头部 -->
        <my-head></my-head>
        <div class="alert alert-success shadow-lg" style="width: 80%;position: relative;top: 90px;left:30px" v-show="see">
            <div>
                <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none"
                    viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span>你已成功修改该商品状态</span>
            </div>
        </div>
        <div class="body" style="width: 70%;float:right;margin-top:100px;margin-right:105px; overflow: auto;">
            <a class="link" @click="goBack">返回</a>
            <div class="overflow-y-auto w-full" style="height: 600px;">
                <table class="table w-full">
                    <thead>
                        <tr>
                            <th>
                                <label>
                                    <input type="checkbox" class="checkbox" v-model="selectAll" @change="toggleAllItems" />
                                </label>
                            </th>
                            <th>商品ID</th>
                            <th>商品名称</th>
                            <th>商家</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in items" :key="item.id">
                            <td>
                                <label>
                                    <input type="checkbox" class="checkbox" v-model="item.checked" />
                                </label>
                            </td>
                            <td>{{ item.id }}</td>
                            <td>
                                <div class="flex items-center space-x-3">
                                    <div class="avatar">
                                        <div class="mask mask-squircle w-12 h-12">
                                            <img :src="item.pic" alt="Avatar Tailwind CSS Component" />
                                        </div>
                                    </div>
                                    <div>
                                        <div class="font-bold">{{ item.name }}</div>
                                    </div>
                                </div>
                            </td>
                            <td>{{ item.supplier }}</td>
                            <td>{{ item.status }}</td>
                            <td>


                                <a v-if="item.status == 0">
                                    <button class="btn btn-ghost btn-xs" @click="changeGoodsStatus(item.id)">批准</button>
                                </a>

                                <button class="btn btn-ghost btn-xs" for="my-modal-6"
                                    @click="() => $router.push('/goods/details/' + item.id).catch(err => { })">详情</button>

                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>
                                <label>
                                    <input type="checkbox" class="checkbox" v-model="selectAll" @change="toggleAllItems" />
                                </label>
                            </th>
                            <th>商品ID</th>
                            <th>商品名称</th>
                            <th>商家</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </tfoot>
                </table>
            </div>


            <div class="btn-group">
                <div class="btn-container">
                    <button v-for="button in buttons" :key="button" class="btn btn-active" @click="changePage(button)">{{
                        button }}</button>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import MyHead from "../../components/head.vue"
import MyNav from "../../components/nav.vue"
export default {
    name: "supplier_list",
    data() {
        return {
            selectAll: false,
            items: [],
            goods: [],
            see: false,
            buttons: [] // 替换为您的按钮数据
        }
    },
    mounted() {
        this.getSupplierInfoBySupplierId();
    },
    methods: {
        toggleAllItems() {
            this.items.forEach(item => {
                item.checked = this.selectAll;
            });
        },
        goBack() {
            this.$router.back();
        },
        //从路由中获取商家ID获取商家发布的商品信息
        getSupplierInfoBySupplierId() {
            this.$http.post('/admin/getSupplierByID', {
                "supplierId": this.$route.params.id,
            }, {
                headers: {
                    Authorization: "Bearer " + localStorage.getItem("admin_token") //带着token去请求
                }
            }).then((res) => {
                console.log(res);
                if (res.data.code == 401) { //代码登陆已经过期了
                    this.$router.push("/")
                    return
                }
                this.goods = res.data.data.goods

                // 计算页数
                let num = Math.floor(this.goods.length / 10);
                if (this.goods.length % 10 !== 0) {
                    num += 1;
                }

                // 重置按钮数组
                this.buttons = [];
                for (let index = 1; index <= num; index++) {
                    //将index 添加到buttons里
                    this.buttons.push(index)
                }

                this.items = this.goods.slice(0, 10)
            }).catch((res) => {
                console.log(res);
            })
        },
        //实现切换数据页码
        changePage(index) {
            this.items = this.goods.slice((index - 1) * 10, index * 10)
        },
        changeGoodsStatus(goodsId) {
            this.$http.post('/admin/changeGoodsStatus', {
                'goodsId': goodsId,
                'status': 1
            }, {
                headers: {
                    Authorization: "Bearer " + localStorage.getItem("admin_token") //带着token去请求
                },
            }
            ).then((res) => {
                console.log(res);
                if (res.data.code == 401) { //代码登陆已经过期了
                    this.$router.push("/")
                    return
                }
                this.see = true
                // 在1秒后将 see 设置为 false
                setTimeout(() => {
                    this.see = false;
                }, 1000);
            }).catch((res) => {
                console.log(res);
            })
        }
    },
    components: {
        'my-head': MyHead,
        'my-nav': MyNav,
    },
}
</script>

<style scoped>
.search {
    border: 1px solid #fff;
    border-radius: 4px;
    height: 120px;
    border: 2px solid #ECEEF4;
    margin-bottom: 20px;
}

.title {
    display: flex;
    align-items: center;
}

.search-icon {
    margin-right: 5px;
}

.btn-group {
    overflow-x: auto;
    justify-content: center;
    margin-left: 350px;
    margin-top: 20px;
}

.btn-container {
    display: flex;
    width: 200px;
}
</style>